var SearchForm = function () {
  var template = /* html */ `
  <div v-loading.fullscreen.lock="loading" class="search-form">
    <sys-common-search request-url="materialSelectFilter/getMaterialSelectData" :request-data="requestData" :search="search"
      :search-field="searchField" label-width="114px" input-width="170px" ref="searchForm" size="medium">
      <template slot="prepend">
        <el-form-item>
          <template slot="label">
            <el-select v-model="search.timeType">
              <el-option v-for="timeType in timeTypeList" :key="'timeType_'+timeType.value" :value="timeType.value" :label="timeType.label">
              </el-option>
            </el-select>
          </template>
          <el-date-picker style="width:226px" v-model="search.startDate" value-format="timestamp" :editable="false"
            :clearable="false" :picker-options="startDateOption"></el-date-picker>
          -
          <el-date-picker style="width:226px" v-model="search.endDate" value-format="timestamp" :editable="false"
            :clearable="false" :picker-options="endDateOption"></el-date-picker>
        </el-form-item>
        <el-form-item label="入库日期">
            <el-date-picker  v-model="search.inStartDay" class="form-input" value-format="timestamp" :editable="false"
              :picker-options="inStartDayOption" style="width:226px;"></el-date-picker>
            -
            <el-date-picker v-model="search.inEndDay" class="form-input" value-format="timestamp" :editable="false"
              :picker-options="inEndDayOption" style="width:226px;"></el-date-picker>
          </el-form-item>
        <el-form-item label="仓库">
          <el-select style="width:170px" clearable v-model="search.warehouseType" placeholder="请选择仓库">
            <el-option v-for="(warehouse,index) in warehouseTypeList" :key="'warehouse_'+index" :label="warehouse.label" :value="warehouse.value"
              @change="warehouseChange">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出入库">
          <el-select style="width:170px" v-model="search.type" clearable placeholder="请选择出入库类型">
            <el-option v-for="(type,index) in typeList" :key="'type_'+index" :label="type.label" :value="type.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询类型">
          <el-select style="width:170px" clearable v-model="search.queryType" placeholder="请选择查询类型">
            <el-option v-for="(queryType,index) in queryTypeList" :key="'queryType_'+index" :label="queryType.label" :value="queryType.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <template slot="append">
        <el-form-item label="客户名称">
          <el-select filterable clearable style="width:170px" v-model="search.customerName" placeholder="请选择客户">
            <el-option v-for="customer in getDropdownData('customerList')" :key="customer.name" :label="customer.name" :value="customer.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制单人员" v-if="!search.fixedCreateUser">
          <el-select filterable clearable style="width:170px" v-model="search.createUser" placeholder="请选择制单人">
            <el-option v-for="createUser in getDropdownData('createUserList')" :key="createUser.id" :label="createUser.name" :value="createUser.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价">
          <el-input-number is-decimal-zero v-model="search.startPrice" placeholder="单价最小值" :controls="false" :min="0" :max="search.endPrice"
            :precision="2" style="width:110px"></el-input-number>
          <span>-</span>
          <el-input-number is-decimal-zero v-model="search.endPrice" placeholder="单价最大值" :controls="false" :precision="2"
            :min="search.startPrice?search.startPrice:0" style="width:110px"></el-input-number>
        </el-form-item>
      </template>
    </sys-common-search>
  </div>
  `;

  return {
    mixins: [
      datePickerOptionsMixin('startDate', 'endDate'),
      datePickerOptionsMixin('inStartDay', 'inEndDay', 'inStartDayOption', 'inEndDayOption')
    ],

    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data: function () {
      var self = this;
      return {
        loading: false,
        searchField: ['materialName', 'model', 'color', 'providerName', 'materialDept', 'orderId', 'factoryNo',
          'customerNo', 'companyOrderId'
        ],
        customerList: [],
        createUserList: [],
        timeTypeList: i18n.getDropDown('warehouseInOutRecord.timeType', ['create', 'balance']),
        typeList: i18n.getDropDown('warehouseInOutRecord.type', [1, 2]),
        queryTypeList: i18n.getDropDown('warehouseInOutRecord.queryType', [1, 2]),
        statusList: i18n.getDropDown('warehouseInOutRecord.status', [0, 1, 2]),
        warehouseTypeList: i18n.getDropDown('warehouseInOutRecord.warehouseType', [4, 5, 2, 3, 6])
      };
    },

    computed: {
      requestData: function () {
        return {
          type: 5,
          warehouseType: this.search.warehouseType
        };
      }
    },

    watch: {
      requestData: function (newData, oldData) {
        if (newData.warehouseType === oldData.warehouseType) {
          return;
        }
        var self = this;
        this.$nextTick(function () {
          self.$refs['searchForm'].resetDropdownData();
        });
      }
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setCustomerList(),
        this.setCreateUserList()
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setCustomerList: function () {
        var self = this;
        return ajaxRequest("warehouse/getCustomerNameByWarehouse").then(function (customerList) {
          var customers = [];
          for (var i = 0; i < customerList.length; i++) {
            var customer = customerList[i];
            var name = customer.userName;
            if (name.trim() === '') {
              continue;
            }
            customers.push({
              name: customer.userName,
              warehouseTypeList: customer.warehouseTypeList
            });
          }
          self.customerList = customers;
          return customers;
        });
      },

      setCreateUserList: function () {
        var self = this;
        return ajaxRequest("warehouse/getWarehouseInOutCreateUser").then(function (createUserList) {
          createUserList = _.map(createUserList, function (createUser) {
            return {
              id: createUser.id,
              name: createUser.userName,
              warehouseTypeList: createUser.warehouseTypeList
            };
          });
          self.createUserList = createUserList;
          return createUserList;
        });
      },

      getDropdownData: function (field) {
        var data = this[field];
        if (data === undefined) {
          data = [];
        }

        var warehouseType = this.search.warehouseType;
        if (warehouseType === '') {
          return data;
        }

        warehouseType = warehouseType + "";
        data = _.filter(data, function (obj) {
          return obj.warehouseTypeList.indexOf(warehouseType) !== -1;
        });
        return data;
      },

      warehouseChange: function () {
        var search = this.search;
        search.customerName = '';
        search.createUser = '';
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
